﻿@using Orchard.Utility.Extensions
@model Coevery.Entities.ViewModels.AddFieldViewModel
<div>
    <div class="modal-header">
        <button type="button" class="close" ng-click="exit()">&#215</button>
        <h3>Add new Field</h3>
    </div>
    <div class="modal-body">
        <div class="row-fluid step2">
            <h5>Step 2. Enter the detail informations</h5>
           @* <div class="widget">*@
                <div class="widget-content form-container edit-mode">
                    @using (Html.BeginFormAntiForgeryPost(Html.ViewContext.HttpContext.Request.Url.PathAndQuery, FormMethod.Post,
                                                          new { @class = "form-horizontal no-border", @id = "field-info-form", @name = "myForm" }))
                    {
                        <fieldset>
                            <legend>Information</legend>
                            <section class="data-row control-group">
                                <label class="control-label required" for="@Html.FieldIdFor(m => m.DisplayName)">
                                    @T("Field Label")
                                </label>
                                <div class="controls errortips">
                                    @Html.TextBoxFor(m => m.DisplayName, new { @class = "span12 required labelForName",autofocus = "autofocus", ng_model = "fieldLabel" })
                                </div>
                            </section>
                            <section class="data-row control-group">
                                <label class="control-label required" for="@Html.FieldIdFor(m => m.Name)">
                                    @T("Field Name")
                                </label>
                                <div class="controls errortips">
                                    @Html.TextBoxFor(m => m.Name, new { @class = "span12 nameisnotid required safename", id = "inputFieldName", ng_model = "fieldName" })
                                </div>
                            </section>
                            <section class="data-row control-group">
                                <label class="control-label">
                                    @T("Options")
                                </label>
                                <div class="controls">
                                    <label class="checkbox">
                                        @Html.CheckBox(Model.FieldTypeName + "Settings.Required", Model.Required, new { ng_model = "required" })
                                        @T("Required")
                                    </label>
@*                                    <label class="checkbox">
                                        @Html.CheckBox(Model.FieldTypeName + "Settings.ReadOnly", Model.ReadOnly, new { ng_model = "readonly" })
                                        @T("Read-Only")
                                    </label>*@
                                    <label class="checkbox">
                                        @Html.CheckBox(Model.FieldTypeName + "Settings.AlwaysInLayout", Model.AlwaysInLayout, new { ng_model = "alwaysInLayout" })
                                        @T("Always In Layout")
                                    </label>
                                    <label class="checkbox">
                                        @Html.CheckBox(Model.FieldTypeName + "Settings.IsAudit", Model.IsAudit, new { ng_model = "isAudit" })
                                        @T("IsAudit")
                                    </label>
                                </div>
                            </section>
                            <section class="data-row control-group">
                                <label class="control-label" for="@Html.FieldIdFor(m => m.HelpText)">
                                    @T("Help Text")
                                </label>
                                <div class="controls">
                                    @Html.TextArea(Model.FieldTypeName + "Settings.HelpText", Model.HelpText, new { @class = "span12", ng_model = "helpText" })
                                </div>
                            </section>
                            @Html.HiddenFor(m => m.FieldTypeName)
                        </fieldset>
                        <fieldset id="fieldPanel">
                            <legend>Field Information</legend>
                            @{ Html.RenderTemplates(Model.TypeTemplates); }
                        </fieldset>
                    }
                </div>
           @* </div>*@
        </div>
        <div class="row-fluid step3">
            <h5>Step 3. Confirm informations and add in layout</h5>
                <div class="form-container">
                    <form class="form-horizontal no-border">
                        <section class="control-group">
                            <label class="control-label">
                                Field Label
                            </label>
                            <div class="controls">
                                <input type="text" class="span12" readonly ng-model="fieldLabel">
                            </div>
                        </section>
                        <section class="control-group">
                            <label class="control-label">
                                Field Name
                            </label>
                            <div class="controls">
                                <input type="text" class="span12" readonly ng-model="fieldName">
                            </div>
                        </section>
                        <section class="control-group">
                            <label class="control-label">
                                Options
                            </label>
                            <div class="controls">
                                <label class="checkbox">
                                    <input type="checkbox" disabled ng-model="required" />
                                    Required
                                </label>
@*                                <label class="checkbox">
                                    <input type="checkbox" disabled ng-model="readonly" />
                                    Read-Only
                                </label>*@
                                <label class="checkbox">
                                    <input type="checkbox" disabled ng-model="alwaysInLayout" />
                                    Always In Layout
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" disabled ng-model="isAudit" />
                                    IsAudit
                                </label>
                            </div>
                        </section>
                        <section class="control-group">
                            <label class="control-label">
                                Help Text
                            </label>
                            <div class="controls">
                                <textarea class="span12" readonly ng-model="helpText"></textarea>
                            </div>
                        </section>
                        <section class="control-group">
                            <label class="control-label">
                            </label>
                            <div class="controls">
                                <label class="checkbox">
                                    @Html.CheckBoxFor(m => m.AddInLayout)
                                    Add in layout
                                </label>
                            </div>
                        </section>
                    </form>
                </div>
        </div>
    </div>

    <div class="modal-footer step2">
        <button class="btn" ng-click="prev()">Back</button>
        <button class="btn" ng-click="next()">Next</button>

    </div>

    <div class="modal-footer step3">
        <button class="btn" ng-click="back()">Back</button>
        <button class="btn " ng-click="exit()">Don't Save</button>
        <button class="btn btn-primary" data-indi-click="save()">Save</button>
    </div>

    <script type="text/javascript">
        $(function () {
            //Validation

            $.validator.addMethod("nameisnotid", function (value) {
                return !(value.toLowerCase() == "id");
            }, "FieldName should not be 'id'");
            $.validator.classRuleSettings.nameisnotid = { nameisnotid: true };

            $.validator.addMethod("safename", function (value) {
                return (/^[A-Za-z]([0-9]|[-_]|[A-Za-z]){0,127}$/.test(value));
            }, "FieldName is not legal!");
            $.validator.classRuleSettings.safename = { safename: true };

            
            var validator = $("#field-info-form").validate({
                //ignore: "*:not('.toValidate *')",
                onkeyup: function (element) {
                    if (element.type == "text") {
                        this.element(element);
                    }
                },
                errorClass: "inputError"
            });

            //Auto get name
            var $name = $("#inputFieldName");
            var $displayName = $(".labelForName");
            var $entityName = '@Request.Url.Segments.LastOrDefault()';

            var jsonUrl = '@Url.Action("FieldName", "SystemAdmin", new RouteValueDictionary { { "Area", "Coevery.Entities" } })';
            var version = 0;

            var nameAltered;
            $name.keyup(function () {
                if (!$name.val()) {
                    nameAltered = false;
                } else {
                    nameAltered = true;
                }
            });

            var compute = function () {
                // stop processing automatically if altered by the user
                if (nameAltered) {
                    return;
                }
                
                $.post(jsonUrl, {
                    creatingEntity: false,
                    entityName: $entityName,
                    displayName: $displayName.val(),
                    version: ++version,
                    __RequestVerificationToken: $("input[name=__RequestVerificationToken]").val()
                },
                    function (data) {
                        if (version == data.version) {
                            $name.val(data.result);
                        }
                    },
                    "json"
                );
            };
            
            $displayName.keyup(function () {
                compute();
                setTimeout(function () {
                    validator.element($name);
                }, 100);
            });
        });
    </script>
</div>
